<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>合并导出</title>

    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylon.glTF2FileLoader.js"></script>
    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
    <!-- <script src="https://preview.babylonjs.com/serializers/babylonjs.glTF2Serializer.min.js"></script> -->
    <style>
      html,
      body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #renderCanvas {
        width: 100%;
        height: 100%;
        touch-action: none;
      }
      .btn {
        width: 80px;
        height: 30px;
        border: 1px solid red;
        background: yellowgreen;
        line-height: 30px;
        text-align: center;
        font-weight: 700;
      }
      .btn-l {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 999;
      }
      .btns {
        position: absolute;
        top: 10px;
        right: 200px;
        z-index: 999;
        display: flex;
      }
    </style>
  </head>
  <body>
    <div class="btn btn-l" onclick="myExport('1')">分别导出</div>
    <div class="btn btn-l" style="left: 100px" onclick="myExport('2')">
      导出
    </div>
    <canvas id="renderCanvas"></canvas>
    <script>
      var scene = null;
      var light=null
      let models = [];
      function init() {
        /*      BABYLON.GLTF2.Loader.Extensions.EXT_meshopt_compression.DecoderPath =
              "./js/meshopt_decoder.module.js"; */

        var canvas = document.getElementById("renderCanvas");

        var createScene = function () {
          var scene = new BABYLON.Scene(engine);

          var camera = new BABYLON.ArcRotateCamera(
            "Camera",
            0,
            0.8,
            10,
            BABYLON.Vector3.Zero(),
            scene
          );
          if(scene){
          light = new BABYLON.HemisphericLight(
          "light", // 光源的名称，用于标识这个光源
          new BABYLON.Vector3(1, 1, 0), // 光的方向，这是一个向量，表示光从 (1, 1, 0) 方向投射到场景中
          scene // 光源所在的场景
        );
        light.intensity = 0.7; // 设置光照强度为 0.7
        }
          camera.attachControl(canvas, false);

          BABYLON.SceneLoader.ImportMesh(
            "",
            "./",
            "Bee.glb",
            scene,
            function (meshes, particleSystems, skeletons) {
              console.log(meshes, particleSystems, skeletons);
              let name = getCaption(item);
              meshes.name = name;
              models.push({
                name: name,
                data: meshes,
              });
              scene.activeCamera = null;
              scene.createDefaultCameraOrLight(true);
              scene.activeCamera.attachControl(canvas, true);
              scene.activeCamera.panningSensibility = 1;
              scene.activeCamera.alpha = Math.PI / 2;
              scene.onPointerObservable.add(function (e) {
                if (e.event.buttons == 1) {
                  console.log("鼠标左");
                  console.log(e.pickInfo.pickedMesh);
                  // // 尝试拾取对象
                  var pickResult = scene.pick(scene.pointerX, scene.pointerY);
                  // console.log(pickResult, "pickResult");
                }
                if (e.event.buttons == 2) {
                  console.log("鼠标右");
                }
                if (e.event.buttons == 4) {
                  console.log("鼠标中");
                }
              }, BABYLON.PointerEventTypes.POINTERDOWN);
            }
          );

          return scene;
        };

        var engine = new BABYLON.Engine(canvas, true, {
          preserveDrawingBuffer: true,
          stencil: true,
        });
        scene = createScene();

        engine.runRenderLoop(function () {
          if (scene) {
            scene.render();
          }
        });

        // Resize
        window.addEventListener("resize", function () {
          engine.resize();
        });

 
      }
      init();
      function getCaption(obj) {
        var index = obj.lastIndexOf("\/");
        obj = obj.substring(index + 1, obj.length);
        // console.log(obj);
        return obj;
      }
      function myExport(type) {
        // console.log(models)scene
        if (type == "1") {
          for (let i = 0; i < models.length; i++) {
            // BABYLON.GLTF2Export.GLBAsync(models[i].data, models[i].name, {
            BABYLON.GLTF2Export.GLBAsync(scene, models[i].name, {
              shouldExportNode: function (node) {
                // return (
                //   node.name != "node0_primitive1" &&
                //   node.name != "node0_primitive2" &&
                //   node.name != "node0_primitive3"
                // );
                return node.name === models[i].name;
              },
            }).then((glb) => {
              glb.downloadFiles();
            });
          }
        } else {
          BABYLON.GLTF2Export.GLBAsync(scene, "model", {
            shouldExportNode: function (node) {
              console.log(node, node.name, node.materials);
              // return node.name='node0'||node.name=="node0_primitive0"
              // return (
              //   node.name != "node0_primitive1" &&
              //     node.name != "node0_primitive2"&&
              //     node.name != "default light"&&
              //     node.name != "node0_primitive3"
              // );
              return node;
            },
          }).then((glb) => {
            glb.downloadFiles();
          });
        }
      }
    </script>
  </body>
</html>
